<template>
  <div>
    <button @click="change">点击</button>
    <mySon></mySon>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [10, 20, 30]
    }
  },
  methods: {
    change() {
      // 1.通过索引改变数组中的一个元素
      // this.arr[0] = 'hi'
      // 解决办法
      // this.$set(修改的数组，下标，修改后的值)
      // this.$set(this.arr, 0, 'hi')
      // 2.直接改变数组的长度  无法监听到
      // this.arr.length = 0
      // 解决方法 
      // splice（下标，删除的长度）
      // this.arr.splice(0, this.arr.length)
    }
  },
  watch: {
    arr(newVal) {
      console.log('新数据');
    }
  }
}
</script>
<style></style>